<template>
	<view>
		<view class="wrap-top-header flex">
			<block v-for="(item, index) in tab_list" :key="index">
				<view class="tab-item" :class="index === current_tab ? 'active f-30' : 'f-28'" @click="onTab(index)">
					{{ item.title }}

					<view class="line" v-if="index === current_tab"></view>
				</view>
			</block>
		</view>

		<view class="wrap safe-area">
			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="item">
						<view class="info-bg flex align-center just-between">
							<view class="price fBold f-30">
								{{ (parseFloat(item.money) + parseFloat(item.handingfee)).toFixed(2) }}
							</view>

							<view class="free-bg flex column align-center">
								<view class="free f-24">手续费：{{ item.handingfee }}</view>

								<image class="free-img" :src="$staticImagePath('wallet/withdraw_free.png')" />
							</view>

							<view class="money-bg flex column align-end">
								<view class="symbol f-20">¥人民币</view>

								<view class="money fBold f-30">{{ item.money }}</view>
							</view>
						</view>

						<view class="withdraw-info flex align-center just-between">
							<view class="bank-info flex align-center">
								<image
									class="icon"
									v-if="item.withdraw_type === 1"
									:src="$staticImagePath('wallet/withdraw_wx.png')"
								/>

								<image class="icon" v-else :src="$staticImagePath(`bank/${item.type}.png`)" />

								<view v-if="item.withdraw_type === 1" class="title f-28">提现到微信零钱</view>

								<view class="title f-28" v-else>
									提现到{{ item.type_text }}***{{ $filters.getBankCardNumber(item.account) }}账户
								</view>
							</view>

							<view class="status f-28">
								{{ item.status_text }}
							</view>
						</view>

						<view class="time f-26">提现时间:{{ item.createtime_text }}</view>

						<view class="refuse f-26" v-if="item.status === 'rejected'">被拒原因:{{ item.why }}</view>
					</view>
				</block>
			</view>

			<wanl-empty v-if="list.length === 0" src="ticket_default3x" text="没找到任何提现记录" />
		</view>
	</view>
</template>

<script>
	import { withdrawLog } from "@/API/wallet.js";
	export default {
		data() {
			return {
				tab_list: [
					{
						title: "红包钱包",
						type: "1",
						status: 1,
					},
					{
						title: "销售钱包",
						type: "2",
						status: 1,
					},
					{
						title: "分佣钱包",
						type: "3",
						status: 1,
					},
				],
				current_tab: 0,

				page: 1, //当前页码
				total: 0, //数据量
				list: [], //数据
			};
		},
		onLoad(options) {
			if (options.index) {
				this.current_tab = parseInt(options.index);
			}
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * tab切换
			 */
			onTab(index) {
				this.current_tab = index;
				this.onRefresh();
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				withdrawLog(this.page, this.tab_list[this.current_tab].type).then((res) => {
					const list = res.data.data;
					if (this.page === 1) {
						this.total = res.data.total;
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-top-header {
		position: sticky;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100rpx;
		background-color: #f6f6f6;
		overflow: hidden;
		z-index: 99;

		.tab-item {
			flex: 1;
			overflow: hidden;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #666666;
			position: relative;

			.line {
				position: absolute;
				left: 50%;
				bottom: 14rpx;
				width: 30rpx;
				height: 6rpx;
				transform: translateX(-50%);
				z-index: 101;
				background: linear-gradient(to right, #f49355, #dd551b);
				border-radius: 3rpx;
				overflow: hidden;
			}
		}

		.active {
			color: #121212;
		}
	}
	.wrap {
		padding: 0rpx 25rpx;
		box-sizing: border-box;

		.wrap-list {
			width: 100%;
			overflow: hidden;

			.item {
				width: 100%;
				overflow: hidden;
				background-color: white;
				padding: 30rpx 25rpx 40rpx 30rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0rpx;
				}

				.info-bg {
					width: 100%;
					overflow: hidden;

					.price {
						color: #eb5c20;
					}

					.free-bg {
						width: 242rpx;
						overflow: hidden;
						gap: 10rpx;

						.free {
							color: #666666;
						}

						.free-img {
							width: 242rpx;
							height: 8rpx;
						}
					}

					.money-bg {
						overflow: hidden;
						gap: 17rpx;

						.symbol {
							width: 90rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							color: white;
							background-color: #d50101;
							border-radius: 5rpx;
						}

						.money {
							color: #d50101;
						}
					}
				}

				.withdraw-info {
					margin-top: 30rpx;
					width: 100%;
					overflow: hidden;
					gap: 20rpx;

					.bank-info {
						flex: 1;
						overflow: hidden;
						gap: 10rpx;

						.icon {
							width: 60rpx;
							height: 60rpx;
						}

						.title {
							color: #121212;
						}
					}

					.status {
						color: #eb5c20;
					}
				}

				.time {
					margin-top: 25rpx;
					width: 100%;
					overflow: hidden;
					color: #888888;
				}

				.refuse {
					margin-top: 25rpx;
					width: 100%;
					overflow: hidden;
					color: #888888;
				}
			}
		}
	}
</style>
